import React from 'react';
import { Card, Table } from 'antd';
import type { CategoryStat, TagStat } from '@/api/dashboard';

export interface RankingTablesProps {
  categories: CategoryStat[];
  tags: TagStat[];
  loading?: boolean;
}

const RankingTables: React.FC<RankingTablesProps> = ({
  categories,
  tags,
  loading = false,
}) => {
  const categoryColumns = [
    {
      title: '分类名称',
      dataIndex: 'categoryName',
      key: 'categoryName',
    },
    {
      title: '文章数',
      dataIndex: 'articleCount',
      key: 'articleCount',
      sorter: (a: CategoryStat, b: CategoryStat) =>
        a.articleCount - b.articleCount,
    },
    {
      title: '访问量',
      dataIndex: 'viewCount',
      key: 'viewCount',
      sorter: (a: CategoryStat, b: CategoryStat) => a.viewCount - b.viewCount,
    },
  ];

  const tagColumns = [
    {
      title: '标签名称',
      dataIndex: 'tagName',
      key: 'tagName',
    },
    {
      title: '文章数',
      dataIndex: 'articleCount',
      key: 'articleCount',
      sorter: (a: TagStat, b: TagStat) => a.articleCount - b.articleCount,
    },
    {
      title: '访问量',
      dataIndex: 'viewCount',
      key: 'viewCount',
      sorter: (a: TagStat, b: TagStat) => a.viewCount - b.viewCount,
    },
  ];

  return (
    <div style={{ display: 'flex', gap: '24px', marginTop: '24px' }}>
      <Card title="分类排行" style={{ flex: 1 }}>
        <Table
          dataSource={categories}
          columns={categoryColumns}
          loading={loading}
          pagination={false}
          size="small"
        />
      </Card>
      <Card title="标签排行" style={{ flex: 1 }}>
        <Table
          dataSource={tags}
          columns={tagColumns}
          loading={loading}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  );
};

export default RankingTables; 